<template>
	<el-descriptions direction="vertical" :title="title" :column="props.options.lineNum" :border="true"
		:style="{ width: '100%' }">
		<el-descriptions-item v-for="(item, index) in props.options.options" :label="item.label" :key="index"
			:min-width="'200px'">
			<component v-if="item.component == 'Map'" :is="FormChildComp[item.component]" :modelValue="item.value"
				:configure="({ ...item, ...item.conf } as any)"></component>

			<!-- <component  :is="FormChildComp[item.component]" :modelValue="item.value"
				:configure="{ ...item, ...item.conf, limit: item.value.length, disabled: true }"></component> -->

			<div v-else-if="item.component == 'UploadImg'">
				<el-image preview-teleported fit="contain" v-if="!(item.value instanceof Array)"
					style="width: 100px; height: 100px" :src="item.value" :zoom-rate="1.2" :preview-src-list="[item.value]"
					:initial-index="1" />
				<span v-if="!!(item.value instanceof Array)">
					<el-image preview-teleported fit="contain" class="img-group-item" v-for="(e, i) in item.value"
						style="width: 100px; height: 100px" :src="e" :zoom-rate="1.2" :preview-src-list="item.value"
						:initial-index="i" />
				</span>
			</div>
			<component v-else-if="item.component == 'Editor'" :is="FormChildComp[item.component]" :modelValue="item.value"
				:configure="{
					...item,
					...item.conf,
					disabled: true,
					whetherShowToolbar: false,
				}" :isPreview="true"></component>

			<ParserVue v-else :item="item" />
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { FormChildComp } from "./components";
import { BasicFormOptions } from "./type";
import ParserVue from "./parser.vue";

const props = defineProps<{
	options: BasicFormOptions<Record<string, any>>;
	title?: string;
}>();
</script>

<style scoped lang="scss">
.img-group-item {
	margin-right: 10px;
}
</style>
